Conversation
Walkthrough멀티라인 textarea에 HTML maxLength 속성을 컴포넌트의 maxLength prop(기본 50)에 바인딩하도록 추가했습니다. 기존 input(type=...) 경로는 변경되지 않았습니다. 퍼블릭/익스포트 시그니처 변화는 없습니다. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant Input as Input Component
participant DOM as Textarea (DOM)
U->>Input: 입력 타이핑
Input->>DOM: render textarea with maxLength=prop(기본 50)
U->>DOM: 계속 입력
DOM-->>U: 추가 입력 제한(문자수 >= maxLength)
Note over DOM: 브라우저 기본 수준에서 문자수 제한 적용
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Assessment against linked issues
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
MATEBALL-STORYBOOK |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/shared/components/input/input.tsx (3)
79-90: input 경로에도 maxLength 전달해 API 일관성 유지 제안현재 구조분해로
maxLength가props에서 빠져 input에는 전달되지 않습니다. 카운터/정책과 실제 제어의 일관성을 위해 input에도 적용을 권장합니다.다음 diff를 적용하면 됩니다:
<input id={id} type="text" + maxLength={maxLength} className="flex-1 p-[1.6rem] text-gray-black placeholder:text-gray-500" ref={ref}
17-18: ref 전달 방식 확인 (forwardRef 전환 권장)
ref를 prop으로 받고 textarea 쪽은 강제 캐스팅합니다.<Input ref={...}>사용 시 함수형 컴포넌트에는 ref가 props로 전달되지 않아 의도와 다를 수 있습니다.forwardRef<HTMLInputElement | HTMLTextAreaElement>로 전환해 일관성과 타입 안정성을 확보하는 것을 권장드립니다. 필요하시면 후속 PR로 스캐폴딩해 드릴게요.Also applies to: 64-65, 83-84
104-107: length 표기 안전성 보강 (미입력 시 undefined 노출 방지)
hasLength만 true이고length가 전달되지 않으면undefined/50이 노출될 수 있습니다. 기본값을 적용하면 안전합니다.- {length}/{maxLength} + {(length ?? 0)}/{maxLength}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/shared/components/input/input.tsx(1 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: heesunee
PR: MATEBALL/MATEBALL-CLIENT#78
File: src/pages/sign-up/utils/age-calculate.ts:1-4
Timestamp: 2025-07-09T09:08:46.371Z
Learning: heesunee는 나이 계산 시 한국식 나이 시스템을 사용하므로, 정확한 생일 기반 계산보다는 출생연도 기준의 간단한 계산 방식을 선호합니다.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: chromatic
🔇 Additional comments (1)
src/shared/components/input/input.tsx (1)
65-65: textarea에 maxLength 바인딩으로 초과 입력 방지 — LGTM요구사항(#362) 충족합니다. 단, 이모지/조합형 문자는 브라우저가 코드 유닛 기준으로 계산할 수 있어 “N자” 정책과 오차가 생길 수 있습니다. 제품 정의가 그래핌(시각적 글자) 기준인지 확인 부탁드립니다.
2 participants
#️⃣ Related Issue
Closes #362
💎 PR Point
Summary by CodeRabbit